<template>
<q-page padding class="bg-grey-10">

    <!-- <div id="fullCalendar"  style="margin-top:80px;z-index:0;position:relative" ref="fullCalendar">

    </div> -->

    <!-- <q-calendar ref="calendar" dark borded v-model="selectedDate" class="absolute-full q-pa-sm" style="margin-top:50px" :view="viewType" locale="zh-cn" :now="now" short-weekday-label short-month-label sticky :resources="resources" :weekdays="[1, 2, 3, 4, 5, 6, 0]" animated transition-prev="slide-right" transition-next="slide-left" :interval-height="50">
        <template #scheduler-resource-day="{ timestamp, /* index, */ resource }">
            <q-badge class="q-row-event">
                <template>
                    <q-icon class="q-mr-xs"></q-icon>
                    <span class="ellipsis">{{ resource.label }}</span>
                </template>
            </q-badge>
        </template>

    </q-calendar> -->
    <progress-plan ref="progressPlan" v-if="tab=='plan'" :user="user" :projectinfo="projectinfo" @update="handleViewTitle"></progress-plan>
    <progress-task ref="progressTask" v-if="tab=='task'" :user="user" :projectinfo="projectinfo" @update="handleTaskTitle"></progress-task>

    <q-scroll-area v-if="tab=='log'" :visible="false" :thumb-style="{
      right: '4px',
      borderRadius: '5px',
      backgroundColor: '#009688',
      width: '5px',
      opacity: 0.75,
    }" :bar-style="{
      right: '2px',
      borderRadius: '9px',
      backgroundColor: '#03a9f4',
      width: '9px',
      opacity: 0.2,
    }" class="q-pa-md" :style="
      $q.platform.is.mobile
        ? 'margin-bottom:75px;position:fixed;left:0;top:55px;right:0;bottom:0'
        : 'position:absolute;left:0;right:0;top:0;bottom:55px'
    " style="margin-top:50px">
        <q-timeline :layout="layout">
            <q-timeline-entry color="negative" icon="iconfont yf-contacts-fill">
                <template v-slot:subtitle>
                    <span class="text-white text-subtitle1">{{
            projectinfo.stime
          }}</span>
                </template>
                <template v-slot:title>
                    <span class="text-white text-subtitle1">项目开始</span>
                </template>
            </q-timeline-entry>
            <q-timeline-entry v-for="item in taskList" :key="item.py_id" :color="item.taskType == 1 ? 'secondary' : (item.taskType==2?'accent':'')" :icon="item.taskType == 2?'iconfont yf-contacts-fill':''" tag="h6">

                <template v-slot:title>
                    <span :class="item.taskType==2?'text-accent text-bold':'text-white'" class=" text-h6">{{ item.taskname }}</span>
                </template>

                <template v-slot:subtitle>
                    <div v-show="item.stimehour == '00:00'||item.taskType==2" style="opacity: 0.8">
                        <div :class="item.taskType==2?'text-accent text-bold':'text-white'" class="text-bold text-subtitle1">{{ item.stimeday }}</div>
                    </div>
                    <div v-show="item.stimehour !== '00:00' && item.taskType !==2 " style="opacity: 0.8">
                        <div class="text-bold text-subtitle1">{{ item.stimehour }}</div>
                        <div class="text-bold text-subtitle2">{{ item.stimeday }}</div>
                    </div>
                </template>
                <div v-if="item.taskname!=='今天'" style="opacity:0.8" class="column">
                    <div>类型： <q-badge :color="item.taskType == 1 ?'secondary':''">{{
                  item.taskType == 1 ? "拍摄计划" : "普通任务"
                }}</q-badge>
                    </div>
                    <div>参与人：<span v-for="i in item.memberlist" :key="i.pm_id">{{i.username}};</span></div>
                    <div>地点：{{item.taskAddress}}</div>
                    <div>时间：{{item.stimehour}}——{{item.etime}}</div>
                    <div>描述：{{item.description}}</div>
                </div>
            </q-timeline-entry>
            <q-timeline-entry color="positive" icon="iconfont yf-contacts-fill">
                <template v-slot:subtitle>
                    <span class="text-white text-subtitle1">{{
            projectinfo.etime
          }}</span>
                </template>
                <template v-slot:title>
                    <span class="text-white text-subtitle1">项目预计结束</span>
                </template>
            </q-timeline-entry>
        </q-timeline>
    </q-scroll-area>


    <q-page-sticky expand position="top" class="bg-dark column items-center justify-center ">
        <q-toolbar class="shadow-7" style="width: 100%;height:50px">
            <q-tabs v-model="tab" style="width: 100%" class="text-grey" active-color="primary" indicator-color="primary" @input="handleTabChanged" :align="$q.platform.is.desktop ? 'left' : 'center'">
                <q-tab style="width: 200px" name="plan" label="进度" />
                <q-tab style="width: 200px" name="task" label="日程" />
                <q-tab style="width: 200px" name="log" label="日志" />
            </q-tabs>

        </q-toolbar>
        <q-toolbar v-if="tab=='plan'" style="position:relative;top:0px;left:0;right:0;height:50px;">
            <span class="text-subtitle1 ">{{viewTitle}}</span>
            <q-space></q-space>
            <q-btn dense flat v-if="user.right>4" @click="handlePlanEdit" :icon="isEdit?'mdi-close-circle-outline':'edit'"></q-btn>
            <q-btn flat dense @click="handlePrev('plan')" icon="mdi-chevron-left"></q-btn>
            <q-btn flat dense @click="handleToday('plan')" label="今天"></q-btn>
            <q-btn flat dense @click="handleNext('plan')" icon="mdi-chevron-right"></q-btn>
        </q-toolbar>
        <q-toolbar v-if="tab=='task'" style="position:relative;top:0px;left:0;right:0;height:50px;">
            <span class="text-subtitle1 ">{{taskTitle}}</span>

            <q-space></q-space>

            <q-btn flat dense @click="handlePrev('task')" icon="mdi-chevron-left"></q-btn>
            <q-btn flat dense @click="handleToday('task')" label="今天"></q-btn>
            <q-btn flat dense @click="handleNext('task')" icon="mdi-chevron-right"></q-btn>
            <q-btn dense class="q-ml-sm" flat v-if="user.right>=4" @click="handleTaskEdit" icon="mdi-calendar-plus" label="创建"></q-btn>
            <q-btn dense class="q-ml-sm" flat v-if="user.right>=4" @click="handleShotplanEdit" icon="mdi-bullhorn-outline" label="通告"></q-btn>
        </q-toolbar>

        <q-separator style="width: 98%" />
    </q-page-sticky>
    <q-page-sticky position="bottom-right" :offset="[50,50]">
        <q-fab v-if="tab=='task'" label="切换视图" vertical-actions-align="left" class="z-max bg-grey-9 shadow-7 text-primary" icon="mdi-swap-horizontal" direction="up" padding="6px">
            <q-fab-action color="primary" @click="handleViewType('timeGridDay')" icon="mail" label="日视图" />
            <q-fab-action color="secondary" @click="handleViewType('timeGridWeek')" icon="alarm" label="周视图" />
            <q-fab-action color="orange" @click="handleViewType('dayGridMonth')" icon="airplay" label="月视图" />
            <q-fab-action color="accent" @click="handleViewType('listMonth')" icon="room" label="列表图" />
        </q-fab>

    </q-page-sticky>

</q-page>
</template>

<script>
import {
    getTaskList
} from "assets/api/studio";

import {
    date
} from "quasar";

export default {
    name: "studioprogress",
    components: {

        ProgressPlan: () => import("pages/studio/progress/component/ProgressPlan.vue"),
        ProgressTask: () => import("pages/studio/progress/component/ProgressTask.vue"),

    },
    props: {
        projectinfo: {
            type: Object
        },
        user: {
            type: Object
        }
    },
    data() {
        return {
          isLoading:true,
            calendar: {},
            pid: "",
            tab: 'plan',
            viewTitle: '',
            taskTitle: '',
            taskList: [],
            isEdit: false,

        };
    },
    watch: {
        projectinfo: function (val) {
            if (val) {
                console.log('project', val);

            }
        },
        user: function (val) {
            console.log(val, 'user');
            if (val) {

            }
        }
    },
    created() {
        this.pid = this.$route.params.pid;

    },
    beforeMount() {
        // set "now" to previous day

    },
    mounted() {

        this.i_name = setInterval(() => {
          this.projectInfo = this.$store.state.projectinfo;
            if (this.projectInfo.name) {
                document.title = this.projectInfo.name + '--进度';
                clearInterval(this.i_name)
            }

        }, 500);

    },

    computed: {
        layout() {
            return this.$q.screen.lt.sm ?
                "comfortable" :
                this.$q.screen.lt.md ?
                "comfortable" :
                "loose";
        },
    },
    methods: {
        handleShotplanEdit() {
            this.$refs.progressTask.handleShotplan()
        },
        handleTaskEdit() {
            this.$refs.progressTask.handleCreateTask();
        },
        handlePlanEdit() {
            this.isEdit = !this.isEdit;
            this.$refs.progressPlan.handleEdit(this.isEdit);
        },
        handleViewTitle(val) {
            this.viewTitle = val;
        },
        handleTaskTitle(val) {
            this.taskTitle = val;
        },
        handleToday(type) {
            if (type == 'plan') {
                this.$refs.progressPlan.handleToday()
            }
            if (type == 'task') {
                this.$refs.progressTask.handleToday()
            }

        },
        handlePrev(type) {
            if (type == 'plan') {
                this.$refs.progressPlan.handlePrev()
            }
            if (type == 'task') {
                this.$refs.progressTask.handlePrev()
            }
        },
        handleNext(type) {
            if (type == 'plan') {
                this.$refs.progressPlan.handleNext()
            }
            if (type == 'task') {
                this.$refs.progressTask.handleNext()
            }
        },

        loadTaskList() {
            getTaskList({
                pid: this.pid
            }).then((res) => {
                let data = res.data.data;
                data.push({
                    taskname: '今天',
                    stime: Date.now(),
                    taskType: 2
                });
                console.log(data);

                function sortData(a, b) {
                    return a.stime - b.stime;
                }
                data.sort(sortData);
                data.forEach((item) => {
                    if (item.memberlist !== undefined) {
                        item.memberlist = JSON.parse(item.memberlist);
                        item.memberlist.forEach(eitem => {
                            this.projectinfo.memberlist.forEach((i) => {
                                if (eitem.pm_id == i.pm_id) {
                                    eitem.username = i.username;
                                }
                            })
                        })
                    }

                    item.stimeday = date.formatDate(item.stime, "MM月DD日");
                    item.stimehour = date.formatDate(item.stime, "HH:mm");
                    item.etime = date.formatDate(item.etime, "MM月DD日 HH:mm");
                });
                this.taskList = data;
            });
        },
        handleViewType(val) {
            this.$refs.progressTask.handleViewType(val)
        },
        handleTabChanged() {

        },

    }
};
</script>

<style scoped>
.fc-theme-standard td,
.fc-theme-standard th {
    border: 0px solid grey !important;
}
</style>
